<template lang="pug">
    div(class="batman-comment-form")
        div(class="batman-comment-form__input")
            div(class="batman-comment-form__input_text")
                el-input(type="text", class="batman-comment-form__textarea", :placeholder="placeholder",v-model="content",@blur="blur", ref="ipt")
            div(class="batman-comment-form__input_btns")
                el-button(type="text",@click.stop.prevent="sendComment") 发送
                
</template>
 
<script>
import BatmanMask from "batman-mask";
import axios from "@/plugins/axios";
import BaseVue from "@/mixins/BaseVue";

export default {
  name: "batman-comment-form",
  mixins: [BaseVue],
  components: { "batman-mask": BatmanMask },
  data() {
    return {
      content: null,
      /** 评论发送中 */
      sending: false,
      maskVisible: false
    };
  },
  props: {
    "post-id": { type: String, default: null },
    "reply-id": { type: String, default: null },
    "reply-root-id": { type: String, default: null },
    visible: { type: Boolean, default: false },
    placeholder: {type: String, default: "写评论..."}
  },
  computed: {
    comment() {
      return {
        content: this.content,
        postId: this.postId,
        replyId: this.replyId,
        replyRootId: this.replyRootId
      };
    }
  },
  watch: {
    visible(val) {
      if (this.maskVisible != val) this.maskVisible = val;
    },
    maskVisible(val) {
      if (this.visible != val) this.$emit("update:visible", val);
    }
  },
  methods: {
    /**
     * 添加评论
     */
    sendComment() {
      if (!this.strip(this.content)) {
        this.warn("不能发送空评论！");
        return;
      }
      if (!this.postId) {
        this.warn("异常，未能识别帖子！");
        return;
      }
      const options = {
        url: "forum/comment/post",
        method: "post",
        data: { model: this.comment }
      };
      this.sending = true;
      axios(options)
        .then(this.sendCommentSuccess)
        .catch(() => {
          this.sending = false;
        });
    },
    /** 评论成功回调 */
    sendCommentSuccess(comment) {
      this.sending = false;
      this.$emit("comment-success", comment);
      this.$emit("update:visible", false);
      this.content = null;
      this.$message({ type: "success", message: "评论成功" });
    },
    blur(){
      this.$emit('blur');
    },
    focus(){
      this.$refs.ipt.focus();
    }
  }
};
</script>
 
<style lang="less" scoped>
.batman-comment-form {
  display: inline-block;
  // height: 52px; /**用于占位置*/

  /** 输入框 和发送按钮*/
  &__input {
    width: 100%;
    height: 52px;

    display: flex;
    flex-direction: row;
    background-color: #f8f8f8;

    padding: 8px 5px;
    position: fixed;

    bottom: 0;
    left: 0;

    &_text {
      flex: auto;
    }
    &_btns {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 0;

      a {
        display: block;
      }
    }
  }
}
</style>
<style lang="less">
.batman-comment-form {
  @textarea_color: #e6e6e6;
  textarea {
    border: @textarea_color 1px solid;
  }
  &__textarea {
    height: 32px;
    .el-textarea__inner:focus {
      border-color: @textarea_color;
    }
  }
}
</style>
